<!DOCTYPE html>
<html manifest="periodicTable.manifest">
<head>
	<meta charset="UTF-8">
	<title>Periodic Table Demo</title>

	<script src="../../libs/kekule/kekule.js?modules=chemWidget&min=true"></script>

	<link rel="stylesheet" type="text/css" href="../../libs/kekule/themes/default/kekule.css" />
	<style>
		fieldset p
		{
			margin: 0.8em auto;
			padding: 0;
		}
		.K-CheckBox
		{
			width: 20em;
			white-space: nowrap;
		}
	</style>

	<script>
		function $w(id)
		{
			return Kekule.Widget.getWidgetById(id);
		};
		function updateOptions()
		{
			var table = $w('peridicTable');
			$w('checkBoxMiniMode').setChecked(table.getUseMiniMode());
			$w('checkBoxEnableSelect').setChecked(table.getEnableSelect());
			$w('checkBoxEnableMultiSelect').setChecked(table.getEnableMultiSelect());
			var comps = table.getDisplayedComponents();
			$w('checkBoxShowGroupHead').setChecked(comps.indexOf('groupHead') >= 0);
			$w('checkBoxShowPeriodHead').setChecked(comps.indexOf('periodHead') >= 0);
			$w('checkBoxShowLegend').setChecked(comps.indexOf('legend') >= 0);
			$w('checkBoxShowSymbol').setChecked(comps.indexOf('symbol') >= 0);
			$w('checkBoxShowName').setChecked(comps.indexOf('name') >= 0);
			$w('checkBoxShowAtomicNum').setChecked(comps.indexOf('atomicNumber') >= 0);
			$w('checkBoxShowAtomicWeight').setChecked(comps.indexOf('atomicWeight') >= 0);
		};
		function applyOptions()
		{
			var table = $w('peridicTable');
			table.setUseMiniMode($w('checkBoxMiniMode').getChecked());
			table.setEnableSelect($w('checkBoxEnableSelect').getChecked());
			table.setEnableMultiSelect($w('checkBoxEnableMultiSelect').getChecked());
			var comps = [];
			if ($w('checkBoxShowGroupHead').getChecked())
				comps.push('groupHead');
			if ($w('checkBoxShowPeriodHead').getChecked())
				comps.push('periodHead');
			if ($w('checkBoxShowLegend').getChecked())
				comps.push('legend');
			if ($w('checkBoxShowSymbol').getChecked())
				comps.push('symbol');
			if ($w('checkBoxShowName').getChecked())
				comps.push('name');
			if ($w('checkBoxShowAtomicNum').getChecked())
				comps.push('atomicNumber');
			if ($w('checkBoxShowAtomicWeight').getChecked())
				comps.push('atomicWeight');
			table.setDisplayedComponents(comps);
		};
		function reportSelectedElements()
		{
			var table = $w('peridicTable');
			var elems = table.getSelectedSymbols();
			var sElems = (elems && elems.length)? elems.join(', '): '(none)';
			alert('Element selected: ' + sElems);
		};
		function init()
		{
			updateOptions();
			$w('btnSelectedElement').addEventListener('execute', reportSelectedElements);
			var optionRootElem = document.getElementById('widgetOptions');
			Kekule.Widget.globalManager.addEventListener('valueChange', function(e){
				var target = e.widget;
				if (target)
				{
					var elem = target.getElement && target.getElement();
					if (Kekule.DomUtils.isDescendantOf(elem, optionRootElem))
						applyOptions();
				}
			});
		}
		Kekule.X.domReady(init);
	</script>
</head>
<body>
	<div id="peridicTable" data-widget="Kekule.ChemWidget.PeriodicTable"></div>
	<fieldset id="widgetOptions" style="float: left">
		<legend>Options</legend>
		<p>
			<span id="checkBoxShowGroupHead" data-widget="Kekule.Widget.CheckBox" data-text="Show group header"></span>
			<span id="checkBoxShowPeriodHead" data-widget="Kekule.Widget.CheckBox" data-text="Show period header"></span>
			<span id="checkBoxShowLegend" data-widget="Kekule.Widget.CheckBox" data-text="Show legend"></span>
		</p>
		<p>
			<span id="checkBoxShowSymbol" data-widget="Kekule.Widget.CheckBox" data-text="Show element symbol"></span>
			<span id="checkBoxShowName" data-widget="Kekule.Widget.CheckBox" data-text="Show element name"></span>
			<span id="checkBoxShowAtomicNum" data-widget="Kekule.Widget.CheckBox" data-text="Show element atomic number"></span>
			<span id="checkBoxShowAtomicWeight" data-widget="Kekule.Widget.CheckBox" data-text="Show element atomic weight"></span>
		</p>
		<p>
			<span id="checkBoxMiniMode" data-widget="Kekule.Widget.CheckBox" data-text="Mini mode"></span>
			<span id="checkBoxEnableSelect" data-widget="Kekule.Widget.CheckBox" data-text="Enable select"></span>
			<span id="checkBoxEnableMultiSelect" data-widget="Kekule.Widget.CheckBox" data-text="Enable multi-select"></span>
		</p>
		<div id="resultGetter" style="float: right">
			<button id="btnSelectedElement" data-widget="Kekule.Widget.Button">Get Selected Element(s)</button>
		</div>
	</fieldset>
</body>
</html>